<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="search-filter">
    <div class="filter-wrap">
        <div class="filter-list">
            <ul class="item show-less pcat" id="product_category">
                <span class="label">分类:</span>
                <input type="hidden" value="${indexColor}" id="ptype">
                <li onclick="javascript:choice(this)"
                    <c:if test="${indexColor==-1 || indexColor==everyc.categoryId}">style="color: #ff6700" </c:if>
                    value="-1" class="pcat">
                    <a class="product-type-item" id="search-whole"
                       onclick="all_search()">全部</a>
                </li>
                <c:forEach items="${categoryList}" var="everyc" begin="0" end="3">

                    <li class="active pcat" onclick="javascript:choice(this)" id="search_choice" <c:if test="${indexColor==everyc.categoryId}">style="color: #ff6700"
                        </c:if>value="${everyc.categoryId}">

                        <a class="product-type-item" id="search-xiaomi">${everyc.name}</a>

                    </li>
                </c:forEach>
            </ul>
            <div id="showhide" <c:if test="${indexColor==1}"> style="display: block" </c:if>>
                <ul class="item show-less " id="shown01">
                    <div class="item-main">
                        <span class="label">拍照像素:</span>
                        <!-- <li>
                        <a class="product-type-item">四摄像头</a>
                    </li> -->
                        <li>
                            <a class="product-type-item">三摄像头</a>
                        </li>
                        <li>
                            <a class="product-type-item">双摄像头</a>
                        </li>
                        <%--                    <li>--%>
                        <%--                        <a class="product-type-item">高清拍摄</a>--%>
                        <%--                    </li> --%>
                    </div>
                </ul>
                <ul class="item show-less " id="shown01">
                    <div class="item-main">
                        <span class="label">屏幕大小:</span>
                        <li>
                            <a class="product-type-item">超大屏</a>
                        </li>
                    </div>
                </ul>
                <ul class="item show-less ">
                    <div class="item-main">
                        <span class="label">运行内存</span>
                        <li>
                            <a class="product-type-item">极速畅玩</a>
                        </li>
                        <!-- <li>
                            <a class="product-type-item">高速</a>
                        </li> -->
                    </div>
                </ul>
                <ul class="item show-less show-less-no">
                    <div class="item-main">
                        <span class="label">电池续航:</span>
                        <li>
                            <a class="product-type-item">超长待机</a>
                        </li>
                    </div>
                </ul>
                <div class="fix-position-box">
                    <ul class="item level-item show-less">
                                                <span class="label">
                                                    高级选项:
                                                </span>
                        <li class="level-menu" id="menu1"><a>CPU型号<i
                                class="iconfont">&#xe68a;</i></a></li>
                        <li class="level-menu" id="menu2"><a>CPU主频<i
                                class="iconfont">&#xe68a;</i></a></li>
                        <li class="level-menu" id="menu3"><a>前置摄像头<i
                                class="iconfont">&#xe68a;</i></a></li>
                        <li class="level-menu" id="menu4"><a>屏幕分辨率<i
                                class="iconfont">&#xe68a;</i></a></li>
                        <li class="level-menu" id="menu5"><a>存储容量<i
                                class="iconfont">&#xe68a;</i></a></li>
                        <li class="level-menu" id="menu6"><a>机身厚度<i
                                class="iconfont">&#xe68a;</i></a></li>
                        <li class="level-menu" id="menu7"><a>网络类型<i
                                class="iconfont">&#xe68a;</i></a></li>
                    </ul>
                    <ul class="item-child" id="show-menu1">
                        <li class="child-list">
                            <a class="product-filter-item">高通骁龙780G</a>
                            <a class="product-filter-item">高通骁龙780G</a>
                        </li>
                    </ul>
                    <ul class="item-child" id="show-menu2">
                        <li class="child-list">
                            <a class="product-filter-item">最高2.4GHz</a>
                            <a class="product-filter-item">最高2.84GHz</a>
                        </li>
                    </ul>
                    <ul class="item-child" id="show-menu3">
                        <li class="child-list">
                            <a class="product-filter-item">2000万像素</a>

                        </li>
                    </ul>
                    <ul class="item-child" id="show-menu4">
                        <li class="child-list">
                            <a class="product-filter-item">2400 x 1080</a>
                            <a class="product-filter-item">3200 x 1440像素</a>
                        </li>
                    </ul>
                    <ul class="item-child" id="show-menu5">
                        <li class="child-list">
                            <a class="product-filter-item">最高512GB</a>
                            <a class="product-filter-item">最高256GB</a>
                            <a class="product-filter-item">128GB</a>
                        </li>
                    </ul>
                    <ul class="item-child" id="show-menu6">
                        <li class="child-list">
                            <a class="product-filter-item">普通厚度</a>
                            <a class="product-filter-item">超薄</a>
                        </li>
                    </ul>
                    <ul class="item-child" id="show-menu7">
                        <li class="child-list">
                            <a class="product-filter-item">双模5G全网通</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="search-result">
    <div class="result-order">
        <div class="order-list-box">
            <ul class="order-list">
                <li class="order-item">
                    <a id="result-all" onclick="showresultall()">综合</a>
                </li>
                <li class="order-item">
                    <a id="result-new" onclick="showresultnew()">新品</a>
                </li>
                <li class="order-item">
                    <a id="result-sale" onclick="showresultsale()">销量</a>
                </li>
                <li class="order-item">
                    <a id="result-price" onclick="showresultprice()">价格<i
                            class="iconfont">&#xe62b;</i></a>
                </li>
            </ul>
            <ul class="type-list">
                <li>
                    <div class="address-choose">
                        <span class="label">收货地</span>
                        <a><span class="address-show">北京 北京市</span></a>
                    </div>
                </li>
                <li>
                    <a class="mchoice" id="result-promotion" onclick="showresultpromotion()"><span
                            class="checkbox"><i class="iconfont choice"
                                                style="display: none; color: #ff7800;">&#xe650;</i></span>促销</a>
                </li>
                <li>
                    <a class="mchoice" id="result-staging" onclick="showresultstaging()"><span
                            class="checkbox"><i class="iconfont choice"
                                                style="display: none;color: #ff7800;">&#xe650;</i></span>分期</a>
                </li>
                <li>
                    <a class="mchoice" id="result-stock" onclick="showresultstock()"><span
                            class="checkbox"><i class="iconfont choice"
                                                style="display: none;color: #ff7800;">&#xe650;</i></span>仅看有货</a>
                </li>
            </ul>
        </div>
        <div class="goods-list-box">
            <div class="goods-list clearfix" id="search-all">
                <c:forEach items="${productPageInfo.list}" var="everyp">
                    <div class="goods-item">
                        <a href="/mi/cart/add_cart?productId=${everyp.productId}">
                            <div class="figure figure-img">
                                <img src="${everyp.picImg}" width="200" height="200">
                            </div>
                            <h2 class="title">${everyp.productName}</h2>
                            <p class="pric"><span>${everyp.price}</span></p>
                            <div class="thumbs">
                                <ul class="thumb-list">
                                    <li>
                                        <img src="${everyp.picImg}" width="34"
                                             height="34">
                                    </li>
                                    <li>
                                        <img src="${everyp.picImg}" width="34"
                                             height="34">
                                    </li>
                                    <li>
                                        <img src="${everyp.picImg}" width="34"
                                             height="34">
                                    </li>
                                </ul>
                            </div>
                            <div class="flags">
                                <span class="new-label">热卖</span>
                                <span class="sale-label">
                                                        <img src="/mi/imgs/juan.png" width="27" height="18"
                                                             class="sale-icon">
                                                        <img src="/mi/imgs/zeng.png" width="27" height="18"
                                                             class="sale-icon">
                                                        <img src="/mi/imgs/jiajiagou.png" width="55.5" height="18"
                                                             class="sale-icon">
                                                    </span>
                            </div>
                        </a>
                    </div>
                </c:forEach>


            </div>
            <div class="goods-list clearfix empty-list" id="show-staging">
                <img src="/mi/imgs/empty.png" class="search-icon" style="width: 200px;">
                <p class="empty">对应筛选条件下没有找到商品,换个筛选条件吧</p>
                <div class="btn"><a href="/mi/product/find">重置筛选条件</a></div>
            </div>
        </div>

    </div>

    <ul class="mi-pagenav">

        <c:if test="${productPageInfo.pageNum<=1}">
            <li class="numbers disabled">
                <a><span class="ico">&LeftAngleBracket;</span></a>
            </li>
        </c:if>

        <c:if test="${productPageInfo.pageNum>1}">
            <li class="numbers">
                <a href="javascript:next_page(${productPageInfo.pageNum-1})"><span class="ico">&LeftAngleBracket;</span></a>
            </li>
        </c:if>
        <!-- 页数 -->
        <%--                            处理标签的begin和end--%>
        <c:if test="${productPageInfo.pageNum+1>=productPageInfo.pages}">
            <c:set var="startPage" value="${productPageInfo.pages-1}"></c:set>
            <c:set var="endPage" value="${productPageInfo.pages}"></c:set>
        </c:if>
        <c:if test="${productPageInfo.pageNum+1<productPageInfo.pages}">
            <c:set var="startPage" value="${productPageInfo.pageNum}"></c:set>
            <c:set var="endPage" value="${productPageInfo.pageNum+1}"></c:set>
        </c:if>
        <c:forEach begin="${startPage<=0?1:startPage}" end="${endPage}" var="v">
            <c:if test="${productPageInfo.pageNum==v}">
                <li class="numbers current1"><a href="javascript:next_page(${v})">${v}</a></li>
            </c:if>
            <c:if test="${productPageInfo.pageNum!=v}">
                <li class="numbers"><a href="javascript:next_page(${v})">${v}</a></li>
            </c:if>
        </c:forEach>
        <c:if test="${productPageInfo.pageNum>=productPageInfo.pages}">
            <li class="numbers disabled text-danger">
                <a><span class="ico">&RightAngleBracket;</span></a>
            </li>
        </c:if>
        <c:if test="${productPageInfo.pageNum<productPageInfo.pages}">
            <li class="numbers">
                <a href="javascript:next_page(${productPageInfo.pageNum+1})"><span
                        class="ico">&RightAngleBracket;</span></a>
            </li>
        </c:if>

    </ul>

</div>

<script type="text/javascript" src="/mi/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/mi/js/product/search.js"></script>
<%--    <script>--%>

<%--        $("ul#product_category").on("click", "li", function () {--%>

<%--            window.location = "/mi/product/search?categoryId=" + $(this).attr("value");--%>
<%--        })--%>
<%--        function search_go() {--%>
<%--            let pname = $("#pname").val();--%>
<%--            let  ptype = $("#ptype").val();--%>
<%--            window.location = "/mi/product/search?productName="+pname+"&categoryId="+ptype;--%>
<%--        }--%>
<%--        function next_page(num) {--%>
<%--            let pname = $("#pname").val();--%>
<%--            let  ptype = $("#ptype").val();--%>
<%--            window.location = "/mi/product/search?pageNum="+num+"&productName="+pname+"&categoryId="+ptype;--%>
<%--        }--%>
<%--        function showresultstaging() {--%>
<%--            var productStage = document.getElementById("show-staging");--%>
<%--            var all = document.getElementById("search-all");--%>
<%--            if (productStage.display="none"){--%>
<%--                all.style.display="none";--%>
<%--                productStage.style.display="block";--%>
<%--            }--%>
<%--        }--%>

<%--     </script>--%>
